import React from 'react'
import { NavBar } from 'antd-mobile'
import { back } from '../../api/public'
import  petCard from '../../image/petcard.png'
import { Form, Button, Input, Toast} from 'antd-mobile'
import { AddCircleOutline } from 'antd-mobile-icons'
import './index.css'
export default function PetCard() {

  //申请卡片
  const getCardApply = ()=>{
    Toast.show({
      content: '申请成功',
      duration: 1000,
    })
  }
  return (
    <div className='card-container'>
        <NavBar  style={{backgroundColor:'#f5de78'}} onBack={back}></NavBar>
        <div className="card-header">
          <img src={petCard} width='100%' alt="" />
        </div>
        <div className="card-address">
              <p className="address-header">
              <AddCircleOutline  color='#edc464'  />  填写收货地址信息</p>
            <Form
             layout='horizontal'
             onFinish={getCardApply}
             footer={
              <Button block type='submit' color='warning' size='large'>
                提交申请
              </Button>
            }
            
            >
              <Form.Item
                  name='name'
                  label='姓名'
                  rules={[{ required: true, message: '姓名不能为空' }]}
                >
                  <Input onChange={console.log} placeholder='请输入姓名' />
             </Form.Item>

             <Form.Item
                  name='telphone'
                  label='手机号码'
                  rules={[{ required: true, message: '手机号不能为空' }]}
                >
                  <Input onChange={console.log} placeholder='请输入手机号' />
             </Form.Item>

             <Form.Item
                  name='address'
                  label='收货地址'
                >
                  <Input onChange={console.log} placeholder='请输入详细地址' />
             </Form.Item>

              
            </Form>
        </div>
    </div>
  )
}
